React 官方教程 AI 互动课程

适合谁

零基础，不需要先学别的课。安装步骤写在课文里，完成条件不要求本机已经装好 Node.js。

学什么

零基础读者按 React 官方 Learn 学。学完意味着这些部分都按页面学过：快速入门、井字棋教程、用 React 思考、描述界面、添加交互、管理状态。学完能自己做一个小界面：几个组件、用 props 传数据、点击后更新 state、在列表里渲染一项一项的内容。脱围机制学到能用 effect 在操作之后取一次数据并显示到页面上。API 参考不进这门课。

学完官方 Learn 的快速入门、井字棋、用 React 思考、描述界面、添加交互和管理状态。能自己做一个小界面：几个组件、用 props 传数据、点击后更新 state、在列表里渲染内容，并用 effect 在操作之后取一次数据显示到页面上。

完整路径

1. 快速入门：React 核心概念全览
2. 教程：从零完整实现井字棋游戏与时间旅行
3. 用 React 思考：将设计原型拆解为组件与数据流
4. 你的第一个组件：声明、嵌套与大写规范
5. 组件的导入与导出：根组件与多组件文件拆分
6. 使用 JSX 书写标签：闭合、单根节点与规则
7. JavaScript 与花括号：在 JSX 中动态显示数据与属性
8. 向组件传递 Props：数据传递、默认值与 children 嵌套
9. 条件渲染：if 语句、三元运算符与逻辑与运算符
10. 渲染列表：map 转换、filter 过滤与 key 的必要性
11. 保持组件纯粹：纯函数原则与副作用隔离
12. 将 UI 视为树：渲染树与模块依赖树
13. 响应事件：事件处理函数、传参与阻止冒泡
14. State：组件的记忆与 useState Hook
15. 渲染和提交：触发、渲染计算与 DOM 提交三步曲
16. State 如同一张快照：理解单次渲染中的常量状态
17. 状态更新队列：批处理机制与更新函数 updater
18. 更新 State 中的对象：不可变性与展开语法复制
19. 更新 State 中的数组：添加、删除、替换与排序
20. 用 State 响应输入：从声明式视角重塑 UI 状态机
21. 选择 State 结构：分组、避免矛盾与消除冗余
22. 在组件间共享状态：状态提升与受控组件
23. 保留和重置 State：组件在 UI 树中的位置与 key 的作用
24. 迁移状态逻辑至 Reducer：dispatch 与 useReducer 重构
25. 使用 Context 深层传递参数：告别 Prop 逐级透传
26. 结合 Reducer 与 Context：构建清晰可扩展的全局数据层
27. 使用 Ref 引用值：在不重新渲染的情况下记住信息
28. 使用 Ref 操作 DOM：节点聚焦、滚动与测量
29. 使用 Effect 与外部系统同步：渲染后取数据与清理机制